<template>
  <div class="map_content">
    <div id="pickerBox">
      <input id="pickerInput" placeholder="输入关键字选取地点" />
      <!-- <div id="poiInfo"></div> -->
      <div class="input-card">
        <div class="input-item">
          <input type="radio" name="func" checked="" value="marker" /><span
            class="input-text"
            >标点位</span
          >
          <input type="radio" name="func" value="polyline" /><span
            class="input-text"
            >线划范围</span
          >
          <input type="radio" name="func" value="polygon" /><span
            class="input-text"
            style="width: 5rem"
            >图形划范围</span
          >
          <input id="clear" type="button" class="btn" value="清除" />
          <input id="close" type="button" class="btn" value="清除所有" />
        </div>
      </div>
    </div>

    <div id="container" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      // longitude:"",
      // latitude:"",
      maps: null,
      path: null,
      Polygon: null,
      polyline: null,
      polyEditor: null,
      marker: null,
      center: [106.050496,30.738558]
    };
  },
  mounted() {
    // this.getmap();
    this.$nextTick(() => {
      if (this.formData && this.formData.area && this.formData.area.length) {
        this.center = this.formData.area[0];
      }
      this.getmap()
      // this.drawMap();
      this.getTool();
    });
  },
  watch:{
    formData(val){
      this.$nextTick(() => {
      if (this.formData && this.formData.area && this.formData.area.length) {
        this.center = this.formData.area[0];
      }
      this.getmap()
      // this.drawMap();
      this.getTool();
    });
    }
  },
  methods: {
    getmap() {
      var _this = this;
      var map = new AMap.Map("container", {
        zoom: 16,
        resizeEnable: true,
        resizeEnable: true,
        center: _this.center
      });
      this.maps = map;
      // 定位到地点
      map.plugin(["AMap.ToolBar"], function() {
        map.addControl(new AMap.ToolBar());
      });
      if (location.href.indexOf("&guide=1") !== -1) {
        map.setStatus({ scrollWheel: false });
      }
      AMapUI.loadUI(["misc/PoiPicker"], function(PoiPicker) {
        var poiPicker = new PoiPicker({
          //city:'北京',
          input: "pickerInput"
        });
        //初始化poiPicker
        poiPickerReady(poiPicker);
      });

      function poiPickerReady(poiPicker) {
        window.poiPicker = poiPicker;

        var marker = new AMap.Marker();
        var infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -20)
        });

        //选取了某个POI
        poiPicker.on("poiPicked", function(poiResult) {
          var source = poiResult.source,
            poi = poiResult.item,
            info = {
              source: source,
              id: poi.id,
              name: poi.name,
              location: poi.location.toString(),
              address: poi.address
            };
          if (!poi.district) {
            poi.district = "";
          }
          if (poiResult) {
            // var address = poi.name + poi.district + "(" + poi.address + ")";
            _this.$emit(
              "passloca",
              poi.location.lng,
              poi.location.lat
              // address
            );
          }

          marker.setMap(map);
          infoWindow.setMap(map);

          marker.setPosition(poi.location);
          infoWindow.setPosition(poi.location);

          infoWindow.setContent(
            poi.name +
              "：<pre>" +
              "</pre>" +
              poi.district +
              "(" +
              poi.address +
              ")"
          );
          infoWindow.open(map, marker.getPosition());
          map.setCenter(marker.getPosition());
        });
      }
    },
    getTool() {
      var map = this.maps;
      var _this = this;
      var mouseTool = new AMap.MouseTool(map);
      let marker = null,
        Polygon = null;
      //回显marker,如果有坐标则回显标记
      if (this.center[0] && this.center[1]) {

        marker = new AMap.Marker({
          position: new AMap.LngLat(this.center[0], this.center[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: "北京"
        });
        map.add(marker);
      }
      //回显折线面积
      if (this.formData) {
        Polygon = new AMap.Polygon({
          path: this.formData.area, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          strokeColor: "#ddd"
        });
        map.add(Polygon);
      }
      //监听draw事件可获取画好的覆盖物
      var overlays = [];
      var cachedian = marker || null; // 存储存在的
      var cachexian = null; // 存储存在的
      var cachemian = Polygon || null; // 存储存在的
      var currentType = "";
      var coordinate = null;
      mouseTool.on("draw", function(e) {
        switch (currentType) {
          case "marker":
            if (cachedian) {
              map.remove(cachedian);
              cachedian = null;
            }
            break;
          case "polyline":
            if (cachexian) {
              map.remove(cachexian);
              cachexian = null;
            }
            break;
          case "polygon":
            if (cachemian) {
              map.remove(cachemian);
              cachemian = null;
            }
            break;
        }

        coordinate = e.obj.w;
        overlays.push(e.obj); //覆盖物对象
        switch (currentType) {
          case "marker":
            cachedian = e.obj;
            break;
          case "polyline":
            cachexian = e.obj;
            break;
          case "polygon":
            cachemian = e.obj;
            break;
        }
        if (coordinate.path) {
          // 划线和画面的情况
          if (currentType == "polyline") {
            _this.$emit("getline", coordinate.path);
          } else if (currentType == "polygon") {
            _this.$emit("getarea", coordinate.path);
          }
        } else if (coordinate.position) {
          // 划点的情况
          _this.$emit(
            "passloca",
            coordinate.position.lng,
            coordinate.position.lat
          );
        }
      });

      function draw(type) {
        currentType = type;
        switch (type) {
          case "marker": {
            mouseTool.marker({
              strokeColor: "#80d8ff"
              //同Polyline的Option设置
            });
            break;
          }
          case "polyline": {
            mouseTool.polyline({
              strokeColor: "#80d8ff"
              //同Polyline的Option设置
            });
            break;
          }
          case "polygon": {
            mouseTool.polygon({
              fillColor: "#00b0ff",
              strokeColor: "#80d8ff"
              //同Polygon的Option设置
            });
            break;
          }
        }
      }
      var radios = document.getElementsByName("func");
      for (var i = 0; i < radios.length; i += 1) {
        radios[i].onchange = function(e) {
          draw(e.target.value);
        };
      }
      draw("marker");
      document.getElementById("clear").onclick = function() {
        if (overlays.length > 0) {
          var clearlays = overlays.pop();
          map.remove(clearlays);
        }
      };
      document.getElementById("close").onclick = function() {
        mouseTool.close(true); //关闭，并清除覆盖物
        for (var i = 0; i < radios.length; i += 1) {
          radios[i].checked = false;
          // overlays = [];
          map.remove(overlays);
          overlays = [];
        }
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.map_content {
  display: block;
  width: 100%;
  height: 500px;
}
#container {
  width: 100%;
  height: 600px;
  .amap-logo {
    display: none !important;
  }
  .amap-copyright {
    opacity: 0;
  }
}
.dialog_map {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.input-item {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  box-sizing: border-box;
}
.btn {
  width: 6rem;
  margin: 0 0px 0 20px;
}
.input-text {
  margin-right: 20px;
  min-width: 60px;
}

#pickerBox {
  height: 40px;
  line-height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  .amap-ui-poi-picker-sugg-container .dock-top .dock-bottom {
    margin-top: 148px;
  }
}
#pickerInput {
  border: 1px solid #ccc;
  // margin-top: 10px;
  // border: none;
  height: 28px;
  padding: 0 15px;
  border-radius: 4px;
  width: 250px !important;
  background: #fff;
}
</style>
